$circles: ();
$move   : ();
$n      : 8;

@function randomNum($max, $min: 0, $u: 1) {
  @return ($min + random($max)) * $u;
}

@for $i from 0 through $n {
  $start-x: randomNum(100, 1) * 1vw;
  $start-y: randomNum(100, 1) * 1vh;

  $end-x: randomNum(150, -50) * 1vw;
  $end-y: randomNum(150, -50) * 1vh;

  $circles: append($circles,
      radial-gradient(randomNum(75, 25) * 1vw,
        #ddd 0%,
        #666 10%,
        #fff,
        #000,
        #999) $start-x $start-y,
      comma);

  $move: append($move, $end-x $end-y, comma);
}

.wrapper {
  position             : relative;
  width                : 100%;
  min-height           : 300px;
  top                  : 0;
  left                 : 0;
  right                : 0;
  bottom               : 0;
  background           : $circles;
  animation            : waveMove 15s infinite linear alternate;
  background-blend-mode: difference;
  filter               : blur(0) hue-rotate(0);
  overflow             : hidden;

  &::before {
    content       : "";
    position      : absolute;
    top           : 0;
    right         : 0;
    bottom        : 0;
    left          : 0;
    background    : #03a9f4;
    mix-blend-mode: color-burn;
  }
}

@keyframes waveMove {
  100% {
    background-position: $move;
    filter             : blur(2px) hue-rotate(30deg);
  }
}